<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>14-动态生成表格-配合后端</title>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr{
            height: 40px;
            background-color: #ccc;
        }
		tbody tr {
		    height: 40px;
		}
		a{
			width:70px;
			height:30px;
			background:red;
			border-radius:3px;
			color:#fff;
			line-height:30px;
			text-align:center;
			display: inline-block;
			cursor:pointer;
		}
    </style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
<!-- 			<tr>
				<td>张翠山</td>
				<td>Java</td>
				<td>100</td>
				<td><a>删除</a></td>
			</tr> -->
        </tbody>
    </table>
	<script type="text/javascript" src="js/jquery2.1.4.js"></script>
	<script type="text/javascript">

		
		//数据的结构
		var oData = [
			{
				aid:1,
				title:'数据的结构-1',
				addtime:'2022-04-13'
			},
			{
				aid:2,
				title:'数据的结构-2',
				addtime:'2022-04-13'
			},
			{
				aid:3,
				title:'数据的结构-3',
				addtime:'2022-04-13'
			},
			{
				aid:4,
				title:'数据的结构-4',
				addtime:'2022-04-13'
			}
		];
		//通过ajax获取后端数据
		//异步请求
		$.ajax({
			url:'https://cache.iminutes.cn/api/soft/softdata.html',
			type:"POST",
			data:{
				
			},
			dataType:'json',
			success:function(res){
				console.log(res);
				console.log(res.meta.status);
				if(res.meta.status==200){
					//oData = res.message;
					
				}
			}
			
		});
		console.log("======"+oData);
		//获取数据补充的容器（元素）对象
		var tbody = document.querySelector('tbody');
		//遍历对象方法 for ...in
		//循环数据组合标签tr结构
		//声明空的字符串
		var ostr = '';
		for(var i=0;i<oData.length;i++){
			var txtObj = oData[i];
			//tbody.innerHTML += '<tr><td>张翠山</td><td>Java</td><td>100</td><td><a>删除</a></td></tr>';
			ostr += '<tr>';
			ostr += '<td>'+txtObj.aid+'</td>';
			ostr += '<td>'+txtObj.title+'</td>';
			ostr += '<td>'+txtObj.addtime+'</td>';
			ostr += '<td><a class="del" aid='+txtObj.aid+'>删除</a></td>';
			ostr += '</tr>';
		}
		//alert(ostr);
		tbody.innerHTML=ostr;
		//删除
		var as = document.querySelectorAll('.del');
		for(var i=0;i<as.length;i++){
			as[i].onclick=function(){
				//点击获取属性值
				var aid = this.getAttribute('aid');
				alert(aid);
				tbody.removeChild(this.parentNode.parentNode);
			}
		}
	</script>
</body>

</html>